
import Vue from 'vue'

const ChildComponent = {
    template: '<div>child component{{data.value}}</div>',
    inject: ['yeye', 'data'],
    mounted(){
        console.log(this.$parent.$options.name)
        console.log(this.yeye)
    }
}

const component = {
    name: 'comp',
    components: {
        ChildComponent
    },
    template: `
        <div :style="style">
            <slot value="456"></slot>
            <child-component></child-component>
        </div>
    `,
    data(){
        return {
            style: {
                width:"200px",
                height:"200px",
                border:'1px solid #aaa'
            },
            value:'abc'
        }
    },
    methods: {
        
    }
}

new Vue({
    components: {
        CompOne: component
    },
    provide(){
        const data = {}

        Object.defineProperty(data, 'value', {
            get:()=> this.value,
            enumerable: true
        })

        return {
            yeye: this,
            data
        }
    },
    el: '#root',
    data:{
        value: '123'
    },
    mounted(){
        console.log(this.$refs.comp.value, this.$refs.span)
    },
    template: `
        <div>
            <comp-one ref="comp">
                <p slot-scope="props" ref="span">this is body{{props.value}}</p>
            </comp-one>
            <input type="text" v-model="value"/>
        </div>
    `
})


